<template>
    <div class="content">
        <!-- openlayers地图 -->
        <div class="map">
            <OlMap ref="openlayersMap"></OlMap>
        </div>
        <OlPopup></OlPopup>
        <div style="position: absolute; left: var(--system-map-padding); top: var(--system-map-padding)">
            <el-button :type="baseType === 1 ? 'success' : 'primary'" @click="changeBaseMap('image', 1)">影像图</el-button>
            <el-button :type="baseType === 2 ? 'success' : 'primary'"
                @click="changeBaseMap('vector', 2)">矢量图</el-button>
            <el-button :type="baseType === 3 ? 'success' : 'primary'"
                @click="changeBaseMap('landform', 3)">地形图</el-button>
        </div>
        <div style="position: absolute; right: var(--system-map-padding); top: var(--system-map-padding)">
            <el-button :type="typeName === 1 ? 'success' : 'primary'" @click="showPointLayer('碰撞点', 1)">气象点</el-button>
            <el-button :type="typeName === 2 ? 'success' : 'primary'" @click="showPointLayer('聚合点', 2)">隐患点</el-button>
            <!-- <DataTable :prj-name="'chinajwd'" :spatial-query-model="true" :conditional-query-model="true"
                :edit-model="false"></DataTable> -->
        </div>
    </div>
</template>

<script setup>
import OlMap from '@/components/ol-map/index.vue';
import OlPopup from '@/components/ol-popup/index.vue';
import DataTable from './data-table/index.vue';
import { useMapStoreHook } from '@/store/map';
import { pointList, weatherPointList } from '@/utils/map-geojson/test/test'
// 初始化map
const mapStore = useMapStoreHook();
const { olMap, extent } = storeToRefs(mapStore);

let form = reactive({
    text: ''
});

let rules = reactive({
    text: [
        {
            required: true,
            message: '请输入文字',
            trigger: 'change'
        }
    ]
});

let pointLayer = ref(null);

const formRef = ref();
//提交表单，查询
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            ElMessage.success('提交成功');
        } else {
            ElMessage.warning('请按规则填写');
            return false;
        }
    });
};
// 重置表单
const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    ElMessage.success('重置成功');
};
const baseType = ref(2)
/**
 * 1，切换地图底图类型
 * @param type 地图类型 image:影像图 vector:矢量图 landform:地形图
 */
const changeBaseMap = (type, i) => {
    baseType.value = i;
    olMap.value.layer.changeBaseMap(type);
};
let clusterLayer1 = null;
/**
 * 添加碰撞点图层
 * 添加弹窗，根据给定的info的name值判断，分别展示气象和隐患点的信息
 */
const addCollisionPointsFn = () => {
    // let arr = weatherPointList.map(item => [+item.qxca01a060, +item.qxca01a070])
    let features = [];
    weatherPointList.forEach((item) => {
        features.push(
            olMap.value.vector.setCollisionPoint({
                coordinates: [+item.qxca01a060, +item.qxca01a070],
                style: {
                    src: new URL(`@/assets/images/test/weather.png`,
                        import.meta.url).href,
                    scale: .5,
                },
                info: {
                    name: 'pointInfo',
                    info: { name: item.qxca01a040 + item.qxca01a050 + item.qxca01a020 }
                }
            })
        );
    });
    clusterLayer1 = olMap.value.vector.addCollisionPoints({
        features: features,
        distance: 50,
        style: {
            fillColor: 'red',
            textFillColor: '#ffffff'
        }
    });
    const layer = olMap.value.layer.createGroup('碰撞点', 2, [clusterLayer1])
    olMap.value.map.addLayer(layer);
}
let clusterLayer = null;
/**
 * 添加聚合点图层
 * 添加弹窗，根据给定的info的name值判断，分别展示气象和隐患点的信息
 */
const addClusterPoints = () => {
    // let arr = pointList.map(item => [+item.lon, +item.lat])
    let features = [];
    pointList.forEach((item) => {
        features.push(
            olMap.value.vector.setClusterPoint({
                coordinates: [+item.lon, +item.lat],
                style: {
                    src: new URL(`@/assets/images/test/point.gif`,
                        import.meta.url).href,
                    scale: 2,
                },
                info: {
                    name: 'pointInfo',
                    info: { name: item.town }
                }
            })
        );
    });

    clusterLayer = olMap.value.vector.addClusterPoints({
        features: features,
        distance: 50,
        style: {
            fillColor: 'red',
            textFillColor: '#ffffff'
        },
    });
    const layer = olMap.value.layer.createGroup('聚合点', 2, [clusterLayer])
    olMap.value.map.addLayer(layer);
};
/**
 * 隐藏所有点图层
 */
const hideAllPointLayer = () => {
    let layers = olMap.value.map.getLayers().getArray()
    layers.forEach((layer) => {
        const l = ['聚合点', '碰撞点'].includes(layer.get("layerName"))
        l && layer.setVisible(false)
    })
}
const typeName = ref(1);
/**
 * 显示某个点图层
 */
const showPointLayer = (name, type) => {
    if (typeName.value === type) return
    typeName.value = type
    hideAllPointLayer()
    mapStore.setType('none');
    let layers = olMap.value.map.getLayers().getArray()
    layers.forEach((layer) => {
        const l = layer.get("layerName") === name
        l && layer.setVisible(true)
    })
}
//加点
// const addPoint = () => {
//     if (!pointLayer.value) {
//         pointLayer.value = olMap.value.layer.createVectorLayer('点图层', 35);
//     }
//     pointLayer.value.getSource().clear();
//     olMap.value.vector.addPoint({
//         coordinates: [117.93266264415541, 36.07115382604098],
//         layer: pointLayer.value,
//         style: {
//             radius: 10,
//             fillColor: '#ff473d',
//             strokeWidth: 1,
//             strokeColor: 'rgba(255, 255, 255, 0.5)'
//         },
//         info: {
//             name: 'pointInfo',
//             info: { name: '测试' }
//         }
//     });
// };
//清除点
// const clearPoint = () => {
//     if (pointLayer.value) {
//         pointLayer.value.getSource().clear();
//     }
// };

// const submitForm1 = () => { };

onMounted(() => {
    addClusterPoints()
    addCollisionPointsFn()
    // 默认显示聚合点图层
    showPointLayer('聚合点', 2)
});
</script>

<style lang="less" scoped>
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;

    .map {
        width: 100vw;
        height: 100%;
    }
}
</style>
